<template>
    <div class="container">
       <div class="items" v-for="(item,index) in MenuList" :key="index" @click="handleChange(item)">
           <div class="image-box">
               <img :src="item.icon" alt="">
           </div>
            <a href="javascript:;">{{ item.name }}</a>
       </div>
    </div>
</template>
<script>
export default {
  name: "MenuPanel",
  props: {
    MenuList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
      handleChange:function(item) {
          this.$router.push(item.path)
      }
  }
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  .items {
    width: 20%;
    margin-top: 3vw;
    // height: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .image-box {
    width: 2.8125rem;
    height: 2.8125rem;
    img {
      width: 100%;
      height: 100%;
      border-radius: 0.5rem;
    }
  }
  a {
    color: #666;
    font-size: 0.64rem;
    text-align: center;
    display: block;
    box-sizing: inherit;
  }
}
</style>

